import Vue from 'vue'
import App from './App.vue'


Vue.config.productionTip = false

// 全局注册，放到main.js中，整个组件都可以使用这个指令 
// 局部注册，在某个组件内部注册 ，组件内部使用
Vue.directive('border', {
  // elment => 给哪个标签写上指令，就是获取哪个标签
  // inserted => 当写上指令的那个标签插入到dom元素中，渲染好了，就会执行
  inserted(el){
    el.style.border = "1px solid skyblue"
    el.style.boxShadow = "0 15px 30px rgb(0 0 0 / 10%)"
  }
})

Vue.directive('color', {
  // elment => 给哪个标签写上指令，就是获取哪个标签
  // inserted => 当写上指令的那个标签插入到dom元素中，渲染好了，就会执行

  // inserted 只在指令所在的元素插入到页面中的时候，执行这个函数，
  // 刚开始的时候执行，之后修改binding.value 不会执行
  inserted(el, binding){
  // (el, {value}) => 对象的解构  
  //  el.style.color = 'red'
   el.style.color = binding.value
  },
  // v-color="xxx" ==> binding.value 
  // update指令的值改变时触发, binding.value指令的值修改触发
  update (el, binding) {
    el.style.color = binding.value
  }
})


new Vue({
  render: h => h(App)
}).$mount('#app')
